<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        .box {
            width: 700px;
            background-color: rgb(0, 0, 0);
        }

        .box li {
            padding-top: 14px;
            padding-right: 19px;
            color: #fff;
            list-style: none;
            height: 40px;
        }

        button {
            float: right;
            color: #fff;
            border: 0;
            font-size: 17px;
            background-color: rgb(0, 0, 0);
        }

        .wenzi:hover {
            font-weight: 700;
        }

        button:hover {
            color: rgb(255, 0, 0);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <span>02-14</span>
                <span class="wenzi">小燕子和容嬷嬷同框，容嬷嬷带上眼镜，和蔼可亲多了。</span>
                <button>删除</button>
            </li>
        </ul>
    </div>

    <script>
        $(function () {
            const news = [
                { "content": "小燕子和容嬷嬷同框，容嬷嬷带上眼镜，和蔼可亲多了。", "date": "2020-02-14" },
                { "content": "厕所是家里最脏的地方？专家发言大家都震惊了。", "date": "2020-04-01" },
                { "content": "一个女生可以可爱到什么程度？网友看后就不淡定了。", "date": "2020-06-01" },
                { "content": "每天掉多少头发算是正常？看完终于放心了。", "date": "2020-11-11" },
            ];
            let html_news = ''
            news.forEach((item, indx) => {
                html_news += `<li>
                <span>${item.date}</span>
                <span class="wenzi">${item.content}</span>
                <button>删除</button>
            </li>`
            })
            $('.box').html(html_news)

            $('.box').on('click', 'button', function () {
                $(this).parents('li').slideUp()
            })

        })


    </script>
</body>

</html>